<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Creeper3 Brain</title>
        <style type="text/css">
            .div1 {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                padding-top: 50px;
            }

            button {
                width: 30px;
                height: 30px;
                margin-right: 20px;
            }

            button.on {
                background-color: #0e0;
                border: solid 1px green;
            }

            p {
                text-align: center;
            }

            p.on {
                color: #0d0;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                const total = 8;
                let div1 = document.querySelector(".div1");
                let pre = null;
                for (let i = 0; i < total; i++) {
                    let btn = document.createElement("button");
                    btn.onclick = btn_click;
                    div1.appendChild(btn);
                    btn.pre = pre;
                    if (pre) {
                        pre.next = btn;
                    }
                    pre = btn;
                }
            }

            function btn_click() {
                if (
                    this.pre == null ||
                    this.pre.on && leftAllOff(this.pre)
                ) {
                    if (this.on) {
                        this.classList.remove('on');
                        this.on = false;
                    } else {
                        this.classList.add('on')
                        this.on = true;
                        if (complete()) {
                            let p = document.querySelector("p");
                            p.innerHTML = '聪明伶俐一百分!';
                            p.className = "on";
                        }
                    }
                }
            }

            function leftAllOff(btn) {
                while (true) {
                    btn = btn.pre;
                    if (btn == null) {
                        return true;
                    }
                    if (btn.on) {
                        return false;
                    }
                }
            }

            function complete() {
                let list = document.querySelectorAll(".div1 button");
                for (let i = 0; i < list.length; i++) {
                    let btn = list[i];
                    if (!btn.on) {
                        return false;
                    }
                }
                return true;
            }
        </script>
    </head>
    <body>
        <p>请点亮所有方块</p>
        <div class="div1">
        </div>
    </body>
</html>
